<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <div class="col-md-8 col-xs-12">
            <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
        </div>
        <div class="col-md-4 text-right">
            <c:if test='${fn:contains(qClassActions,"add")}'>
                <world:hasPermission permissions="/sys/user/add">
                    <a class="btn btn-primary btn-sm no-border" href="${contextPath}/sys/user/add">
                        <i class="ace-icon fa fa-plus"></i>添加
                    </a>
                </world:hasPermission>
            </c:if>
            <c:if test='${fn:contains(qClassActions,"export")}'>
                <a class="btn btn-primary btn-sm no-border" href="${contextPath}/sys/user/export">
                    <i class="ace-icon fa fa-plus"></i>导出
                </a>
            </c:if>
        </div>
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <form class="form-inline" id="searchForm" method="post">
                    <input name="pageIndex" type="hidden">
                    <%@include file="/WEB-INF/common/back/fragment/query-fragement.jsp" %>
                    <div class="space-4"></div>
                    <div class="row center">
                        <button type="button" id="queryBtn" class="btn btn-purple btn-sm no-border">
                            <i class="ace-icon fa fa-search fa-on-right"></i>查询
                        </button>
                        <button type="reset" class="btn btn-info btn-sm no-border">
                            <i class="ace-icon fa fa fa-undo fa-on-right"></i>清空
                        </button>
                    </div>
                    <div class="space-4"></div>
                </form>
            </div>
            <div class="col-xs-12">
                <div id="jqxgrid"></div>
            </div>
        </div>
    </div>
</div>

<div id="app">
    <div class="modal fade in" id="selRoles" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">选择角色</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th width="30">
                                        <label class="inline"></label>
                                    </th>
                                    <th>角色名称</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="role in roles">
                                    <td v-if="role.checked=='true'">
                                        <label class="inline"><input name="itemChk" type="checkbox" checked class="ace" v-bind:data-roleId="role.id"> <span class="lbl"></span></label>
                                    </td>
                                    <td v-if="role.checked!='true'">
                                        <label class="inline"><input name="itemChk" type="checkbox" class="ace" v-bind:data-roleId="role.id"> <span class="lbl"></span></label>
                                    </td>
                                    <td> {{ role.roleName }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="saveUserRoles()" class="btn btn-primary">确定</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">
                        <i class="ace-icon fa fa-times bigger-110"></i> 关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${contextPath}/static/vue/vue.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var source = {
            datatype: 'json',
            datafields: [
                {name: 'id', type: 'string'},
                {name: 'username', type: 'string'},
                {name: 'name', type: 'string'},
                {name: 'phone', type: 'string'},
                {name: '操作', type: 'string'}
            ],
            id: 'id',
            url: '${contextPath}/sys/user/list',
            type: 'POST',
            async: true,
            filter: function () {
                $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
            },
            beforeprocessing: function (data) {
                if (data != null) {
                    source.totalrecords = data.totalElements;
                }
            }
        };

        var jqxgrid = $('#jqxgrid');
        var dataAdapter = new $.jqx.dataAdapter(source, {
            formatData: function (data) {
                $.extend(data, {
                    params: JSON.stringify($("#searchForm").serializeObject())
                });
                return data;
            }
        });
        jqxgrid.jqxGrid({
            theme: 'bootstrap',
            width: '100%',
            autoheight: true,
            source: dataAdapter,
            pageable: true,
            filterable: false,
            enablebrowserselection: true,
            columnsresize: true,
            pagesize: 10,
            pagesizeoptions: ['10', '15', '20'],
            virtualmode: true,
            rendergridrows: function (obj) {
                return obj.data;
            },
            columns: [
                {text: '用户名', datafield: 'username'},
                {text: '姓名', datafield: 'name'},
                {text: '手机号', datafield: 'phone'},
                {text: '操作', datafield: '操作', columntype: 'string', cellsrenderer: handleRender}
            ]
        });

        jqxgrid.on('bindingcomplete', function (event) {
            $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
        });

        $("#queryBtn").click(function () {
            $('#jqxgrid').jqxGrid('updatebounddata');
        });

        $("#allChk").bind("click", function () {
            $("input[name='itemChk']").prop("checked", $(this).prop("checked"));
            $("#allChk").prop("checked", $(this).prop("checked"));
        });
        $("input[name='itemChk']").on("click", function () {
            $("#allChk").prop("checked", $("input[name='itemChk']").length == $("input[name='itemChk']:checked").length);
        });
    });

    var userId;
    var app = new Vue({
        el: '#app',
        data: {
            roles: ""
        }
    });

    function showRoleModal(id) {
        userId = id;
        app.roles = "";
        $.ajax({
            type: "POST",
            url: "${contextPath}/sys/user/roles?id=" + id,
            dataType: "json",
            success: function (json) {
                if (json.success) {
                    app.roles = json.data;
                    $("#selRoles").modal('show');
                } else {
                    layer.msg(json.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("对不起，系统异常！");
            }
        });
    }

    function saveUserRoles() {
        var roleIds = "";
        $("input[name='itemChk']:checked").each(function () {
            roleIds += $(this).attr("data-roleId") + ",";
        });

        $.ajax({
            type: "POST",
            url: "${contextPath}/sys/user/role/save",
            dataType: "json",
            data: {
                userId: userId,
                roleIds: roleIds.substr(0, roleIds.length - 1)
            },
            success: function (json) {
                if (json.success) {
                    $('#jqxgrid').jqxGrid('updatebounddata');
                } else {
                    layer.msg(json.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("对不起，系统异常！");
            }
        });
        $("#selRoles").modal('hide');
    }

    function del(id) {
        layer.confirm('确定删除？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                type: "POST",
                url: "${contextPath}/sys/user/del",
                dataType: "json",
                data: {
                    ids: id
                },
                success: function (json) {
                    if (json.success) {
                        $('#jqxgrid').jqxGrid('updatebounddata');
                        layer.closeAll('dialog');
                    } else {
                        layer.msg(json.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg("对不起，系统异常！");
                }
            });
        }, function () {

        });
    }

    function handleRender(row, column, value) {
        var data = $('#jqxgrid').jqxGrid('getrowdata', row);
        if (data == undefined) {
            return "";
        }
        var btn = "&nbsp";
        <world:hasPermission permissions="/sys/use/view">
        btn += "<a class='btn btn-xs btn-success' href='${contextPath}/sys/user/view?id=" + data.id + "'>查看</a> ";
        </world:hasPermission>
        <world:hasPermission permissions="/sys/use/edit">
        <c:if test = '${fn:contains(qClassActions,"edit")}'>
        btn += "<a class='btn btn-xs btn-info' href='${contextPath}/sys/user/edit?id=" + data.id + "'>编辑</a> ";
        </c:if>
        </world:hasPermission>
        <world:hasPermission permissions="/sys/use/del">
        <c:if test = '${fn:contains(qClassActions,"del")}'>
        btn += '<button class="btn btn-xs btn-danger" onclick="del(\'' + data.id + '\')">删除</button> ';
        </c:if>
        </world:hasPermission>
        <world:hasPermission permissions="/sys/use/role/save">
        btn += '<button class="btn btn-xs btn-warning" onclick="showRoleModal(\'' + data.id + '\')">选择角色</button>';
        </world:hasPermission>
        return btn;
    }
</script>